<style>

	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer; }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.cities, .types{width: 100%; height: 32px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; }
	.types { justify-content: space-around; margin: 30px 0; font-size: 14px; color: #2C405A;}
	.city, .type { text-align: center;}
	.gyms  { width: 100%;  margin-top: 20px; flex-flow: row wrap; align-content: flex-start; overflow: auto;}
	.gym{ width: 160px; height: 30px; font-size: 12px; margin-left: 20px;}
	
	#chart { width: 90%; margin-left: 5%; height: 350px;}

	.waiting { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); }
	.waiting > div { width: 200px; height: 40px; font-size: 60px; font-weight: bolder; color: darkorange; text-shadow: 0 0 6px #555555; margin: 300px auto;}	
	.memo { font-size: 10px; margin-left: 5%;}
</style>
<div id="container">

	<div id="vm">
		<h4 class="pagetitle">约课及体验课约课情况</h4>
		<div class="cities line">
			<div class="city item" :class="city == 'nation' ? 'choosed':''" @click="choosenation()">全国</div>
			<div v-for="(item, i) in cities" class="city item" :class="item.city == city ? 'choosed' : ''" @click="choosecity(item.city)">{{item.city}}</div>
		</div>
		<div class="gyms line"  v-show="city != 'nation'">
			<div class="gym item" :class="gymid == -1 ? 'choosed':''" @click="chooseallgym()">{{city}}全部门店</div>
			<div v-for="(item, i) in gyms" class="gym item" :class="item.gymid == gymid ? 'choosed' : ''" @click="choosegym(item.gymid)">{{item.gymname}}</div>
		</div>
		<div id="chart"></div>
		<div style="height: 30px;"></div>
		<div class="types line"  v-show="city == 'nation'">
			<div class="type item" v-for="item in types" :class="item.value == type ? 'choosed' : ''" @click="choosetype(item.value)" style="width: 40%;">{{item.name}}</div>
		</div>		
		<v-table style=" width: 90%; margin-left: 5%;"
			:height="400" 
			is-horizontal-resize 
			:columns="columns" 
			:table-data="tableData" 
			@sort-change="sortChange">
		</v-table>
		<div class="memo">注：所有数据均截止到昨日。</div> 
		<div style="height: 40px;"></div>
		<section class="waiting" v-if="isLoading"><div>waiting...</div></section>
	</div>
</div>	

<script>

	var vm = new Vue({
		el: "#vm",
		data: {
			cities: [],  city: C.city,
			gyms: [],    gymid: C.gymid,
			types: [{name: '全国各城市约课情况', value: 'incity'}, {name: '全国各门店约课情况', value: 'incountry'}],
			type: 'incity',
			tableData: [],
			columns: [
				{field: "target", title: "城市/门店", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "d", title: "日期/时间", width: 85, titleAlign: 'center', columnAlign:'center', orderBy:'',  isResize:true},
				{field: "pre", title: "约课总人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
				{field: "ty_pre", title: "体验课约课人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
			],
			isLoading: true,
		},
		methods: {
			choosecity: function(i){
				if(this.isLoading) return;
				this.city = i;
				this.showgyms();
			},
			choosenation: function(){ // 选择全国
				if(this.loading) return;
				this.city = 'nation'
				this.showcharts()
			},
			showgyms: function(){
				let that = this;
				post(dataDomain + "data/post.php/ksap/users/city_gyms", {"city": this.city}, function(r){
					console.log(r);
					that.gyms = r;
					that.gymid = r.data[0].gymid
					that.showcharts()
				})
			},
			choosegym: function(i){
				if(this.isLoading) return;
				this.gymid = i;
				this.showcharts()
			},
			chooseallgym: function(){
				this.gymid = -1;
				this.showcharts()
			},
			choosetype: function(i){
				if(this.isLoading) return;
				this.type = i;
				this.showtable()
			},
			showcharts: function(){
				let that = this;
				this.isLoading = true;
				let postCounter = 2;
				// let monthArr = (length => Array.from({length}).map((v,k)=>k + 1))(31);  // 自动生成一个1号到31号的纯数字数组, 在此处已不需要，保存一个写法。
				let opt = rd.chart_option.createNew();
				opt.add_series([{name: "本月约课", type: "line"}, {name: "本月体验课约课", type: "bar"},
					{name: "上月约课", type: "line"}, {name: "上月体验课约课", type: "bar"}]);
				opt.option.xAxis[0].name = "日期";
				opt.option.yAxis[0].name = "人次";
				opt.option.color = ['darkorange', 'blue', 'lightgrey', 'lightgrey']
				let datas = [];
				for(let i = 0; i < 31; i++){
					let x  = {d: i + 1};
					datas.push(x);
				}
				// 纵比，月度 先求上月（因为上月日期比较完整，其实先求本月也是可以的）， 再求本月。
				if(this.city == 'nation'){
					post(dataDomain + "data/post.php/ksap/gyms/dailyall", 
						{"begintime": new Date().add(-1, 'month').format('yyyy-MM-01'),
						"endtime": new Date().format('yyyy-MM-01')}, function(r){
						console.log(r)
						for(let i in r.data){
							let j = new Date(r.data[i].d).getDate() - 1;
							datas[j].pre_r = r.data[i].pre;
							datas[j].ty_pre_r = r.data[i].ty_pre;
						}
						post(dataDomain + "data/post.php/ksap/gyms/dailyall",
							{"begintime": new Date().format('yyyy-MM-01'),
							"endtime": new Date().format()}, function(r){
							console.log(r)
							for(let i in r.data){
								let j = new Date(r.data[i].d).getDate() - 1;
								datas[j].pre = r.data[i].pre;
								datas[j].ty_pre = r.data[i].ty_pre;	
							}
							console.log("datas", datas);
							opt.fill_data(datas, 'd', ['pre', 'ty_pre', 'pre_r', 'ty_pre_r']);
							let chart = echarts.init(document.getElementById("chart"));
							chart.setOption(opt.option);
							that.showtable();
						})	
					})	
				}else{
					post(dataDomain + "data/post.php/ksap/gyms/dailyall", 
						{"target": this.gymid == -1 ? 'g.city' : 'g.`name`',
						"conditon": this.city == 'nation' ? "true" : this.gymid == -1 ? "g.city = '"+this.city+"'" : "g.id = " + this.gymid,
						"begintime": new Date().add(-1, 'month').format('yyyy-MM-01'),
						"endtime": new Date().format('yyyy-MM-01')}, function(r){
						console.log(r)
						for(let i in r.data){
							let j = new Date(r.data[i].d).getDate() - 1;
							datas[j].pre_r = r.data[i].pre;
							datas[j].ty_pre_r = r.data[i].ty_pre;
						}
						post(dataDomain + "data/post.php/ksap/gyms/dailyall", 
							{"target": that.gymid == -1 ? 'g.city' : 'g.`name`',
							"condition": that.city == 'nation' ? "true" : that.gymid == -1 ? "g.city = '"+that.city+"'" : "g.id = " + that.gymid,
							"begintime": new Date().format('yyyy-MM-01'),
							"endtime": new Date().format()}, function(r){
							console.log(r)
							for(let i in r.data){
								let j = new Date(r.data[i].d).getDate() - 1;
								datas[j].pre = r.data[i].pre;
								datas[j].ty_pre = r.data[i].ty_pre;	
							}
							console.log("datas", datas);
							opt.fill_data(datas, 'd', ['pre', 'ty_pre', 'pre_r', 'ty_pre_r']);
							let chart = echarts.init(document.getElementById("chart"));
							console.log(opt.option)
							chart.setOption(opt.option);
							
							that.showtable();
						})	
					})	
					
				}
				
			},
			
			showtable: function(){
				let that = this;
				this.isLoading = true; // 选择表格类型时，只更新表格，因此补充定义一次加载状态
				// 横比，当天全市，或全国，
				if(this.city == 'nation'){
					// 对像为城市时，只有全国范围一种结果
					if(this.type == 'incity'){
						this.columns[0].title = '城市'
						post(dataDomain + "data/post.php/ksap/gyms/dailycount", {"target": 'g.city',
							"condition": "true",
							"begintime": new Date().add(-1, 'day').format(),
							"endtime": new Date().format()}, function(r){
							console.log(r)
							that.tableData = r.data;
							that.isLoading = false;
						})	
					}
					if(this.type == 'incountry'){
						this.columns[0].title = '门店'
						post(dataDomain + "data/post.php/ksap/gyms/dailycount", {"target": 'g.`name`',
							"condition": "true",
							"begintime": new Date().add(-1, 'day').format(),
							"endtime": new Date().format()}, function(r){
							console.log(r)
							that.tableData = r.data;
							that.isLoading = false;
						})
					}
				}else{
					this.columns[0].title = '门店'
					if(this.gymid == -1){ 
						// 指定城市
						post(dataDomain + "data/post.php/ksap/gyms/dailycount", {"target": 'g.`name`',
							"condition":  "g.city = '" + this.city + "'",
							"begintime": new Date().add(-1, 'day').format(),
							"endtime": new Date().format()}, function(r){
							console.log(r)
							that.tableData = r.data;
							that.isLoading = false;
						})
					}else{
						// 选择门店，显明7日明细
						post(dataDomain + "data/post.php/ksap/gyms/classescount", {"gymid": this.gymid}, function(r){
							console.log(r)
							that.tableData = r.data;
							that.isLoading = false;
						})
					}
					
				}
			},
			sortChange: function(e){
				for(let i in e){
					if(e[i]){
						vm.tableData.sort(function(a, b){
							let n = 0;
							if(!isNaN(a[i])){
								n = Number(b[i]) - Number(a[i])
							}else{
								n = a[i] < b[i] ? 1 : a[i] == b[i] ? 0 : -1;
							}
							if(e[i] == "asc"){
								n = -n;
							}
							return n;
						})
					}
				}
			},

		},
		mounted(){
			var that = this;
			post(dataDomain + "data/post.php/ksap/gyms/cities", {}, function(r){
				that.cities = r.data
				that.showgyms()
			})
			let dd = new Date()
			console.log()
		}
	})


</script>